/**
 * 主题钩子
 * 为组件提供响应式的主题支持
 */
import { ref, computed, onMounted, onUnmounted, watch } from 'vue'
import { getTheme, getThemeButtonType, setTheme, themes, getThemeColor, getThemeTextColor } from '../utils/theme'

/**
 * 使用主题钩子
 * 提供响应式的主题支持和主题相关功能
 * @returns 主题相关状态和方法
 */
export function useTheme() {
  // 当前主题
  const currentTheme = ref(getTheme())
  
  // 当前主题按钮类型
  const themeType = computed(() => getThemeButtonType())
  
  // 当前主题色
  const themeColor = computed(() => getThemeColor())
  
  // 当前主题文字颜色
  const themeTextColor = computed(() => getThemeTextColor(currentTheme.value))
  
  // 可用主题列表
  const availableThemes = ref(themes)
  
  // 监听主题变化的处理函数
  const handleThemeChange = (e) => {
    currentTheme.value = e.detail.theme
  }
  
  // 切换到指定主题
  const changeTheme = (theme) => {
    setTheme(theme)
    currentTheme.value = theme
  }
  
  // 获取主题对应的图标名称
  const getThemeIcon = (theme = currentTheme.value) => {
    const iconMap = {
      'blue': 'Blue',
      'red': 'Cherry',
      'navy': 'Moon',
      'light-blue': 'Sunny',
      'cyan': 'Histogram',
      'green': 'GoodsFilled'
    }
    return iconMap[theme] || 'Blue'
  }
  
  // 获取当前主题标签类型
  const getTagType = () => {
    const typeMap = {
      'blue': 'primary',
      'red': 'danger',
      'navy': 'info',
      'light-blue': 'primary',
      'cyan': 'info',
      'green': 'success'
    }
    return typeMap[currentTheme.value] || 'primary'
  }
  
  // 获取主题对应的计算样式
  const getThemeStyle = (property, customTheme) => {
    const theme = customTheme || currentTheme.value
    const root = document.documentElement
    const styles = getComputedStyle(root)
    return styles.getPropertyValue(`--${property}`).trim()
  }
  
  // 生成主题CSS变量
  const generateThemeVars = (color, name = 'custom') => {
    // 转换HEX到RGB
    let r, g, b
    if (color.startsWith('#')) {
      const hex = color.substring(1)
      r = parseInt(hex.substring(0, 2), 16)
      g = parseInt(hex.substring(2, 4), 16)
      b = parseInt(hex.substring(4, 6), 16)
    } else if (color.startsWith('rgb')) {
      const match = color.match(/\d+/g)
      r = match[0]
      g = match[1]
      b = match[2]
    } else {
      return {}
    }
    
    return {
      [`--${name}-color`]: color,
      [`--${name}-color-rgb`]: `${r}, ${g}, ${b}`,
      [`--${name}-color-light`]: `rgba(${r}, ${g}, ${b}, 0.1)`,
      [`--${name}-color-lighter`]: `rgba(${r}, ${g}, ${b}, 0.05)`,
      [`--${name}-hover-color`]: `rgba(${r}, ${g}, ${b}, 0.8)`,
      [`--${name}-active-color`]: `rgba(${r}, ${g}, ${b}, 0.9)`
    }
  }
  
  // 将主题变量应用到DOM
  const applyThemeVars = (vars, selector = ':root') => {
    let styleString = `${selector} {\n`
    
    for (const [key, value] of Object.entries(vars)) {
      styleString += `  ${key}: ${value};\n`
    }
    
    styleString += '}'
    
    const styleId = 'dynamic-theme-vars'
    let styleEl = document.getElementById(styleId)
    
    if (!styleEl) {
      styleEl = document.createElement('style')
      styleEl.id = styleId
      document.head.appendChild(styleEl)
    }
    
    styleEl.innerHTML = styleString
  }
  
  // 组件挂载时
  onMounted(() => {
    // 监听主题变化事件
    window.addEventListener('themeChange', handleThemeChange)
  })
  
  // 组件卸载时
  onUnmounted(() => {
    // 移除事件监听
    window.removeEventListener('themeChange', handleThemeChange)
  })
  
  // 监听主题变化，更新相关状态
  watch(currentTheme, (newTheme) => {
    console.log('主题已切换到:', newTheme)
  })
  
  return {
    currentTheme,
    themeType,
    themeColor,
    themeTextColor,
    availableThemes,
    changeTheme,
    getThemeIcon,
    getTagType,
    getThemeStyle,
    generateThemeVars,
    applyThemeVars
  }
} 